const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');  // 引入 vue-loader 文件


module.exports = {
    entry: './src/main.js',
    mode: 'none',
    output: {
        filename: 'js/[name]-[contenthash:8].bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [path.resolve('src')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
              },
          {
            test: /\.less$/,
            use: ["style-loader" ,  "css-loader" , "less-loader"]
          },
          {
            test: /\.css$/, // 处理 css 文件，以及 .vue 文件中的 <style>
            use:[
                'vue-style-loader',
                'style-loader',
                'css-loader'
            ]
        },
        { test: /\.js$/, use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
      }},
          {
            test: /\.vue$/,
            use: "vue-loader"
          },
        { 
            test: /\.png$/,
             use:{loader:"file-loader", options:{
                 esModule: false,
                 outputPath: 'images/',
                 publicPath: 'images/'
                }
            }           
       }
        ],
      },
      plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        }),
        new VueLoaderPlugin(),
        
    ]
}